<template>
	<div class="content">
		<el-card class="box-card">
			<div class="flex_row">
				<div>
					<div class="header_title">{{assessmentData.assessMonth}} {{assessmentData.assessOptionName}}</div>
					<div class="header_desc">
						考核人：{{assessmentData.carryOutName}}
						<span style="margin: 0 20px;">{{assessmentData.startTime}}至 {{assessmentData.endTime}}</span>
						<span>考核得分：<span style="font-weight: bold;">{{parseFloat(assessmentData.assessMarkTotal)}}</span></span>
						<span v-if="assessmentData.exceedFlag" style="color: red;">（评分超期：{{assessmentData.exceedDay}}天）</span>
					</div>
				</div>
				<div>
					<el-button type="success" @click="updata">更新</el-button>
					<!-- <el-button type="warning" @click="appeal">申述</el-button> -->
					<el-button v-if="isAppeal==true" type="primary" @click="appealSumbit">提交</el-button>
				</div>
			</div>
			<el-steps :active="getStatusIdx()" simple  :style="stepsList.length>2?'padding: 10px;':'padding: 10px 200px;'" process-status="success" finish-status="finish">
			  <el-step :title="item.label" v-for="(item,idx) in stepsList"></el-step>
			</el-steps>
		</el-card>
		<el-collapse v-model="activeName" class="box-card" v-for="(item,idx) in assessmentData.details">
			<el-collapse-item :name="item.indicatorStatus">
				<template slot="title">
					<div class="flex_row title">
						<div>{{$store.getters.getIndicatorType[item.indicatorStatus]}}</div>
					</div>
				</template>
				<div class="indicator_box" :style="getHeight()">
					<el-table :ref="'table'+idx" :data="item.entryList" :key="tableKey" show-summary :summary-method="getSummaries" height="100%" border :cell-style="{ padding: '3px 0' }"
						:header-cell-style="{ backgroundColor:'#f4f4f4' }" style="width: 100%;position: absolute;">
						<el-table-column v-if="isAppeal" type="selection" width="50" fixed />
						<el-table-column type="index" label="序号" width="50" fixed/>
						<el-table-column prop="indicatorLibraryName" label="指标名称" width="180" />
						<el-table-column prop="indicatorLibraryWeight" label="指标权重" width="100" />
						<el-table-column prop="indicatorLibraryRemark" label="指标描述" min-width="300" />
						<el-table-column prop="assessStandardRemark" label="考核标准" min-width="300" />
						<el-table-column prop="tool" label="管理工具" min-width="300" />
						<el-table-column prop="indicatorLibraryNapeRemark" label="评分描述" min-width="300" v-if="assessmentData.assessStatus>'E'" />
						<el-table-column prop="oneselfMark" label="自评" width="100">
							<template slot-scope="{row}">
								<span v-if="['E','F','G'].indexOf(assessmentData.assessStatus)>-1&&item.indicatorStatus=='ACQUIESCE'">{{row.oneselfMark}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>	
						<el-table-column prop="leaderMark" label="上级评分" width="100" >
							<template slot-scope="{row}">
								<span v-if="['F','F','G'].indexOf(assessmentData.assessStatus)>-1">{{row.leaderMark}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="assessMark" label="得分" width="100" >
							<template slot-scope="{row}">
								<span v-if="['E','F','G'].indexOf(assessmentData.assessStatus)>-1">{{row.assessMark}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>
<script>
	import indicator from '@/mixins/indicator'
	import { getDateByMonth } from '@/assets/js/time.js'
	export default {
		components: {
		},
		mixins: [indicator],
		data() {
			return {
				assessmentData:{},
				code:'',
				isAppeal:false,
				tableKey:false,
				stepsList:[],
				activeName: [],
				indicatorTypeList: [],
				// 指标分组下拉框
				tableList: [], // 指标库列表
			}
		},
		created() {
			this.getIndicatorTypeList()
			this.getParam()
			this.stepsList=[]
			Object.keys(this.$store.getters.assessmentStatus).forEach(key => {
				this.stepsList.push({
					label: this.$store.getters.assessmentStatus[key],
					value: key
				})
			})
			console.log(this.$store.getters.assessmentStatus)
		},
		methods: {
			
			// 解析路由参数
			getParam() {
				const query = this.$route.query
				let res = query ? this.$decode(query) : ''
				this.getData(res.code)
			},
			// 获取数据
			async getData(val){
				let res = await this.$API.assessAll.reqDetail(val)
				let{ code, responseBody } = res
				if (res.code == '0') {
					let arr = []
					res.responseBody.details.forEach(item => {
						arr.push({
							indicatorStatus: item[0].indicatorStatus,
							indicatorStatusName: this.indicatorTypeList[item[0].indicatorStatus],
							entryList: item
						})
					})
					this.assessmentData = res.responseBody
					this.assessmentData.details = this.initArr(arr)
					this.assessmentData.startTime = getDateByMonth(this.assessmentData.assessMonth).startTime
					this.assessmentData.endTime = getDateByMonth(this.assessmentData.assessMonth).endTime
					
					if(this.assessmentData.assessStatus=='A'){
						this.stepsList=this.stepsList.slice(0, 2)
					}else{
						this.stepsList.splice(0, 1)
					}
					
					this.getHeight()
				} else {
					this.$message.error(res.message)
				}
				
			},
			getStatusIdx(){
				let index=-1
				this.stepsList.some((item,idx)=>{
					if(item.value==this.assessmentData.assessStatus){
						index=idx
						return true
					}
				})
				return index
			},
			initArr(arr) {
				arr.some((item, idx) => {
					if (item.indicatorStatus == 'ACQUIESCE') {
						arr.unshift(arr.splice(idx, 1)[0])
						return true
					}
				})
				return arr
			},
			// 更新状态
			async updata(){
				let res = await this.$API.assessOption.reqApprovalStuatusUpdate(this.assessmentData.code)
				if (res && res.code == 0) {
					this.$message.success('已完成更新！')
					this.getParam()
				} else {
					this.$message.error(res.message)
				}
			},
			// 申述
			appeal(){
				this.isAppeal=true
				this.$nextTick(()=>{
					this.assessmentData.details.forEach((item,idx)=>{
						let refs='table'+idx
						this.$refs[refs][0].doLayout()
					})
					
				})
				this.getHeight()
				
			},
			// 申述提交
			appealSumbit(){
				let arr=[]
				this.assessmentData.details.forEach((item,idx)=>{
					let refs='table'+idx
					arr=arr.concat(this.$refs[refs][0].selection)
				})
				console.log(arr)
			},
			// 表格合计
			getSummaries(param) {
				const { columns, data } = param;
				const sums = []
				columns.forEach((column, index) => {
				  if (index == 0) {
				    sums[index] = '合计'
				    return
				  } else if (['assessMark'].indexOf(column.property)>-1 ) {
				    const values = data.map(item => Number(item[column.property]))
				    if (!values.every(value => isNaN(value))) {
				      sums[index] = values.reduce((prev, curr) => {
				        const value = Number(curr)
				        if (!isNaN(value)) {
				          return prev + curr
				        } else {
				          return prev
				        }
				      }, 0)
				      sums[index] = sums[index].toFixed(2)
				    } else {
				      sums[index] = ''
				    }
				  } else {
				    sums[index] = ''
				  }
				})
				return sums
			},

			// 获取table高度
			getHeight() {
				let style = ''
				let len = this.assessmentData.details.length
				let height = 300	
				if (len == 2) {
					height = 650
				}
				if (len > 2) {
					height = this.assessmentData.details.length * 200
				}
				style = 'height:calc(100vh - ' + height + 'px);'
				return style
			},
			
			// 获取列表数据
			async searchOne(val) {
				let res = await this.$API.activeManage.reqSearchOne(val)
				let {
					code,
					responseBody
				} = res
				if (code == 0) {
					this.tableList = responseBody.records || []
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-width: 1000px;
	}
	.box-card {
		background-color: #fff;
		margin: 10px 10px 0 10px;
		padding: 12px;
		
		
		.header_title{
			font-weight: bold;
			font-size: 17px;
		}
		.header_desc{
			color: #9d9d9d;
			padding-bottom: 5px;
		}
		
		.title {
			font-size: 15px;
			width: 100%;
			font-weight: bold;

			div:nth-child(1) {
				color: #006ee3;
			}
		}
	}

	.my_input {
		max-width: 300px;
		margin-right: 15px;
	}

	::v-deep .el-collapse-item__header,
	::v-deep .el-collapse-item__wrap {
		border: none;
	}
	
	::v-deep .el-collapse-item__content {
		padding-bottom: 0;
	}
	

	.main {
		margin-bottom: 10px;

		::v-deep th {
			height: 20px;
			padding: 1px;
		}
	}

	.dialog-box {
		padding: 10px 100px;
		margin-top: 20px;
	}

	.ann_input {
		width: 300px;
	}
	.indicator_box {
		min-height: 220px;
		position: relative;
	}
	
	::v-deep .el-step.is-simple:not(:last-of-type) .el-step__title {
    max-width: 100%;
	}
	::v-deep .el-step.is-simple .el-step__title {
	    font-size: 12px;
	    line-height: 12px;
			// margin-right: 5px;
	}

	// ::v-deep .el-step__main{
	//     min-width: 80px;
	// 		width: auto;
	//     margin-right: 15px !important;
	// }


</style>